<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="/WEB-INF/jsp/common/header.jsp" %>

<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card shadow">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0">编辑用户信息</h4>
            </div>
            <div class="card-body">
                <form action="${pageContext.request.contextPath}/user/update" method="post" enctype="multipart/form-data">
                    <input type="hidden" name="id" value="${user.id}">
                    
                    <div class="text-center mb-4">
                        <div class="avatar-wrapper position-relative mb-3">
                            <c:choose>
                                <c:when test="${user.avatar != null && user.avatar != ''}">
                                    <img id="userAvatarImg" src="${pageContext.request.contextPath}${user.avatar}" class="avatar-image" alt="${user.nickname != null && user.nickname != '' ? user.nickname : user.username}">
                                </c:when>
                                <c:otherwise>
                                    <div class="avatar-circle">
                                        <span class="initials">${user.nickname != null && user.nickname != '' ? user.nickname.substring(0, 1) : user.username.substring(0, 1)}</span>
                                    </div>
                                </c:otherwise>
                            </c:choose>
                            <div class="avatar-overlay">
                                <i class="fas fa-camera"></i>
                                <span>选择头像</span>
                            </div>
                        </div>
                        <input type="file" id="avatarInput" name="avatar" accept="image/*" style="display: none;">
                        <div class="form-text">点击头像可以上传新头像</div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="username" class="form-label">用户名 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="username" name="username" value="${user.username}" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="password" class="form-label">密码 <span class="text-danger">*</span></label>
                            <input type="password" class="form-control" id="password" name="password" value="${user.password}" required>
                            <div class="form-text">如需修改密码，请输入新密码；否则请保持原密码</div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="nickname" class="form-label">昵称</label>
                            <input type="text" class="form-control" id="nickname" name="nickname" value="${user.nickname}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="fullName" class="form-label">姓名</label>
                            <input type="text" class="form-control" id="fullName" name="fullName" value="${user.fullName}">
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label for="age" class="form-label">年龄</label>
                            <input type="number" class="form-control" id="age" name="age" value="${user.age}" min="1" max="120">
                        </div>
                        <div class="col-md-8 mb-3">
                            <label class="form-label">性别</label>
                            <div class="mt-2">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="gender" id="gender-male" value="男" ${user.gender == '男' ? 'checked' : ''}>
                                    <label class="form-check-label" for="gender-male">男</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="gender" id="gender-female" value="女" ${user.gender == '女' ? 'checked' : ''}>
                                    <label class="form-check-label" for="gender-female">女</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="gender" id="gender-other" value="其他" ${user.gender == '其他' || user.gender == null ? 'checked' : ''}>
                                    <label class="form-check-label" for="gender-other">其他</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="email" class="form-label">电子邮箱</label>
                            <input type="email" class="form-control" id="email" name="email" value="${user.email}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="phone" class="form-label">手机号码</label>
                            <input type="tel" class="form-control" id="phone" name="phone" value="${user.phone}">
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="hobby" class="form-label">爱好</label>
                        <input type="text" class="form-control" id="hobby" name="hobby" value="${user.hobby}">
                        <div class="form-text">多个爱好请用逗号分隔，如：阅读,旅游,音乐</div>
                    </div>
                    
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary">保存修改</button>
                    </div>
                </form>
            </div>
            <div class="card-footer text-center">
                <a href="${pageContext.request.contextPath}/user/view?id=${user.id}" class="btn btn-outline-secondary">返回查看</a>
            </div>
        </div>
    </div>
</div>

<!-- 自定义样式 -->
<style>
.avatar-circle {
    width: 100px;
    height: 100px;
    background-color: #007bff;
    text-align: center;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

.initials {
    position: relative;
    color: #ffffff;
    font-size: 48px;
    font-weight: bold;
}

.avatar-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto;
    cursor: pointer;
    overflow: hidden;
}

.avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    opacity: 0;
    transition: opacity 0.3s;
}

.avatar-wrapper:hover .avatar-overlay {
    opacity: 1;
}

.avatar-overlay i {
    font-size: 24px;
    margin-bottom: 5px;
}

.avatar-overlay span {
    font-size: 12px;
}
</style>

<!-- 头像上传脚本 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const avatarWrapper = document.querySelector('.avatar-wrapper');
    const avatarInput = document.getElementById('avatarInput');
    const avatarImg = document.getElementById('userAvatarImg');
    
    if (avatarWrapper && avatarInput) {
        avatarWrapper.addEventListener('click', function() {
            avatarInput.click();
        });
        
        avatarInput.addEventListener('change', function() {
            if (this.files && this.files[0]) {
                // 本地预览
                const reader = new FileReader();
                reader.onload = function(e) {
                    if (avatarImg) {
                        avatarImg.src = e.target.result;
                    } else {
                        // 如果原来没有img（即首次上传头像），则插入img标签
                        const img = document.createElement('img');
                        img.id = 'userAvatarImg';
                        img.className = 'avatar-image';
                        img.alt = '用户头像预览';
                        img.src = e.target.result;
                        // 移除原有的avatar-circle
                        const circle = avatarWrapper.querySelector('.avatar-circle');
                        if (circle) avatarWrapper.removeChild(circle);
                        // 插入img到avatarWrapper
                        avatarWrapper.insertBefore(img, avatarWrapper.firstChild);
                    }
                }
                reader.readAsDataURL(this.files[0]);
            }
        });
    }
});
</script>

<%@ include file="/WEB-INF/jsp/common/footer.jsp" %> 